/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Cell, Table, TableBody, TableRow, Text, TableHead,
} from "customize-easy-ui-component";
import {DirectLink} from "../../routing/Link";
import {TailMenRowIspCheck} from "../contain/rarelyVary";
import {useFixRowPrefUnt} from "../hook/useFixRowPrefUnt";
import {items工作内容} from "./editorJobr";

const tailRender=(orc: any, name: string)=><>
  <CCell>{orc?.[name]?.c??'／'}</CCell>
  <CCell>{orc?.[name]?.r??'／'}</CCell>
  <CCell>{orc?.[name]?.d??'／'}</CCell>
</>;
export const JobResponsibiliVw= ({orc, rep} :{orc:any, rep:any}
) => {
  //const theme= useTheme();
  //【注意】配置地一致性，split:[10,20] 需要和编辑器的拆分统一。 【助手】 JSON.parse(orc?._tblFixed??'[]') 【工具】
  const [renders]=useFixRowPrefUnt({orc, rep, config:items工作内容, tailRender,split:[10,20] });
  return <>
    <div css={{"@media print": {paddingBottom: '2rem', pageBreakInside: 'avoid'}} }>
      <Text id='JobResponsibili1' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
      }}>监检工作内容和检验结果报告</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text></Text>
        <Text>报告编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["4.5%", "5%", "%", "8%","9%", "29%", "22%"] } css={{borderCollapse: 'collapse', "@media print": {marginTop: '-2rem'}}} tight  miniw={800}>
      <TableHead>
          <TableRow>
            <CCell><Text css={{fontSize:'0.75rem'}}>序号</Text></CCell><CCell colSpan={2}>监检内容</CCell><CCell><Text css={{fontSize:'0.75rem'}}>监检类别</Text></CCell>
            <CCell>监检方法</CCell><CCell>检验结果</CCell><CCell>确认日期</CCell>
          </TableRow>
      </TableHead>
      <TableBody>
        <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/JobResponsibili1#JobResponsibili1`}>
          {renders[0]}
        </DirectLink>
        <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/JobResponsibili2#JobResponsibili2`}>
          {renders[1]}
        </DirectLink>
        <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/JobResponsibili3#JobResponsibili3`}>
          {renders[2]}
        </DirectLink>
      </TableBody>
    </Table>
    <TailMenRowIspCheck orc={orc} rep={rep} cap={'监检员'} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
      <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/JobResponsibili3#JobResponsibili3`}>
        <TableRow>
          <Cell colSpan={2}><div css={{
            minHeight: '3rem',whiteSpace:'pre-wrap'
          }}>备注：<br/>{orc.工作备注}</div></Cell>
        </TableRow>
      </DirectLink>
    </TailMenRowIspCheck>
    <Text css={{fontSize:'0.75rem'}}>“检验方法”可填写“Z”表示资料确认，“X”表示现场监督，“W”表示实物抽查。如有问题，将存在的问题记录在备注栏。</Text>
  </>;
};

